<template>
  <div class="outer-padding">
    <div class="ds-title pd-bottom--32">报表分析</div>
    <div class="outer-title pd-bottom--32 pd-top--32">
      <div class="pointer mr-64" @click="titleTab(1)" :class="{ fontw: currTitle === 1 }"
        >全校概况
      </div>
      <div class="pointer" @click="titleTab(2)" :class="{ fontw: currTitle === 2 }">学院概况</div>
      <p class="day-list">
        <span
          class="item-text item-text__margin pointer"
          :class="{ 'item-text--active': item.active }"
          v-for="item in nav"
          :key="item.id"
          @click="tabChange(item)"
          >{{ item.name }}</span
        >
      </p>
    </div>
    <!-- 模块 -->
    <component :is="componentId"></component>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import { getIndexList } from '@/api/listen'
  import { columns } from './columns'
  import tab1 from './tab1.vue'
  import tab2 from './tab2.vue'

  export default defineComponent({
    name: 'Markcomponent',
    components: {
      DynamicTable,
      tab_1: tab1,
      tab_2: tab2,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        queryparam: {
          day: null,
          scoreDay: null,
        },
        componentId: 'tab_1',
        currTitle: 1,
        activeKey: 0,
        classType: ['校领导', '院领导', '督导组'],
        allCompaniesDetail: [] as any,
        nav: [
          { id: 0, name: '近7天', active: true },
          { id: 1, name: '近30天', active: false },
          { id: 2, name: '近180天', active: false },
        ],
        list: [
          { id: 0, name: '全部', type: 0, active: true },
          { id: 1, name: '听课', type: 0, active: false },
          { id: 2, name: '评课', type: 0, active: false },
        ],
      })

      /**
       * @description 加载表格数据
       */
      /**
       * @description 加载表格数据
       */
      const loadData = (params) => {
        const myParams = { ...params, ...state.queryparam }
        return getIndexList(myParams)
      }

      const navTab = (ev) => {
        state.activeKey = ev
      }

      // 选择天
      const chooseDay = (item) => {
        state.queryparam.day = item
      }
      // 联动日期
      const chooseTime = (ev) => {
        valueDate.value = ev
      }

      // 选择课程状态
      const choose = (item) => {
        state.list.map((v) => {
          v.id === item.id ? (v.active = true) : (v.active = false)
        })
      }

      const tabChange = (ev) => {
        state.nav.map((v) => (v.id === ev.id ? (v.active = true) : (v.active = false)))
      }

      const titleTab = (ev) => {
        state.currTitle = ev
        state.componentId = `tab_${ev}`
      }

      return {
        ...toRefs(state),
        tableRef,
        tabChange,
        valueDate,
        chooseDay,
        chooseTime,
        choose,
        navTab,
        loadData,
        columns,
        titleTab,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .flex-table {
    display: flex;
    align-items: center;
  }
</style>
